<template>
  <div class="container">
    <Layout>
      <Content>
        <div class="nav">
          <ul class="category">
            <router-link
              :to="{path:`/banners/nav/banner`}"
              class="banner"
              tag="li" replace>首页轮播页
            </router-link>
            <router-link
            :to="{path:`/banners/nav/adv`}"
            class="adv"
            tag="li" v-if="petee==='1'">登录广告图
          </router-link>
            <router-link
              :to="{path:`/banners/nav/guide`}"
              class="banner"
              tag="li" replace  v-if="petee==='1'">引导页轮播图
            </router-link>
            <router-link
              :to="{path:`/banners/nav/wishes`}"
              class="banner"
              tag="li" replace>开屏页
            </router-link>
          </ul>
        </div>
        <div class="right">
          <keep-alive>
            <router-view/>
          </keep-alive>
        </div>
      </Content>
    </Layout>
  </div>
</template>
<script lang="ts">
    import {Component, Prop, Vue, Watch} from 'vue-property-decorator';
    import {Route} from 'vue-router';
    import {NavBloc} from './NavBloc';
    import {FormBloc} from '@/view/device/FormBloc';
    import {store} from '@/store/Store';
    @Component({})
    export default class extends Vue {
        bloc = new NavBloc();
        get petee() {
            return store.state.user.tepee
        }
    }
</script>
<style lang="less" scoped>
  .container {
    padding-top: 20px;
  }
  .nav {
    margin-bottom: 20px;
    background-color: rgba(255, 255, 255, 1);
    height: 50px;
    border: 1px solid rgba(242, 242, 242, 1);

    .category {
      li {
        float: left;
        cursor: pointer;
        padding: 17px 0px 12px 50px;
        width: 150px;
        position: relative;

        &:nth-child(4) {
          padding: 17px 0px 12px 50px;
          width: 184px;
        }
      }

      .router-link-active {
        border-bottom: 1px solid blue;
      }
    }
  }

  .right {
    min-height: 630px;
  }

  /deep/ .ivu-layout {
    background-color: rgba(255, 255, 255, 1);
  }

</style>
